<!DOCTYPE html>
<html>
<head>
    <title>Mars</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 主要CDN源（使用国内镜像） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/4.3.0/marked.min.js"></script>
    <!-- 备用CDN源 -->
    <script>
        // 检查marked是否加载成功
        window.addEventListener('load', function() {
            if (typeof marked === 'undefined') {
                console.log('主要CDN加载失败，尝试备用CDN...');
                const backupSources = [
                    'https://lf26-cdn-tos.bytecdntp.com/cdn/marked/4.3.0/marked.min.js',
                    'https://unpkg.zhimg.com/marked@4.3.0/marked.min.js',
                    'https://cdn.staticfile.org/marked/4.3.0/marked.min.js'
                ];

                function tryLoadBackup(index) {
                    if (index >= backupSources.length) {
                        console.log('所有CDN都加载失败，使用简单文本处理...');
                        window.marked = {
                            parse: function(text) {
                                return text
                                    .replace(/\n/g, '<br>')
                                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                                    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
                            }
                        };
                        return;
                    }

                    const backupScript = document.createElement('script');
                    backupScript.src = backupSources[index];
                    backupScript.onerror = function() {
                        console.log(`备用CDN ${index + 1} 加载失败，尝试下一个...`);
                        tryLoadBackup(index + 1);
                    };
                    document.head.appendChild(backupScript);
                }

                tryLoadBackup(0);
            }
        });

        // 确保marked对象总是可用
        if (typeof marked === 'undefined') {
            window.marked = {
                parse: function(text) {
                    return text.replace(/\n/g, '<br>');
                }
            };
        }
    </script>
    <style>
        /* 颜色方案调整 */
        body {
            background: linear-gradient(125deg, #0f1a3f 0%, #1c1f4a 50%, #2a1b4d 100%);
            color: #e0e0e0;
            font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            line-height: 1.6;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            line-height: 1.6;
            overflow: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0f1a3f;
            background-image: 
                radial-gradient(1px 1px at 50% 50%, #fff 100%, transparent),
                radial-gradient(2px 2px at 25% 75%, rgba(255, 255, 255, 0.8) 100%, transparent),
                radial-gradient(2px 2px at 75% 25%, rgba(255, 255, 255, 0.7) 100%, transparent),
                radial-gradient(100px 100px at 20% 30%, rgba(74, 138, 255, 0.2) 0%, transparent),
                radial-gradient(150px 150px at 80% 70%, rgba(119, 71, 255, 0.2) 0%, transparent);
            background-size: 200px 200px, 250px 250px, 300px 300px, 600px 600px, 800px 800px;
            background-position: 0 0;
            animation: starTwinkle 4s ease-in-out infinite alternate,
                     starMove 120s linear infinite;
            z-index: -1;
        }

        @keyframes starTwinkle {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }

        @keyframes starMove {
            from { background-position: 0 0; }
            to { background-position: -600px -600px; }
        }

        /* 添加模糊对话气泡背景 */
        #chat-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: visible;
        }

        .chat-mirror {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.15);
            width: 90%;
            max-width: 1000px;
            height: 85%;
            max-height: 800px;
            background: rgba(20, 22, 36, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            filter: blur(15px) brightness(0.5);
            z-index: -1;
            pointer-events: none;
            opacity: 0.8;
        }

        .floating-message {
            position: fixed;
            padding: 40px 50px;
            border-radius: 40px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.15);
            font-size: 32px;
            max-width: 80%;
            backdrop-filter: blur(20px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform-origin: center;
            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            z-index: -1;
            transition: all 0.8s ease;
            opacity: 0.6;
        }

        .floating-message:hover {
            opacity: 0.8;
            transform: scale(1.02);
        }

        .floating-message {
            position: absolute;
            padding: 30px 40px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.25);
            font-size: 24px;
            max-width: 600px;
            backdrop-filter: blur(12px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform-origin: center;
            box-shadow: 0 8px 25px rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            z-index: 1;
            transition: opacity 0.5s ease;
        }



        #chat-container {
            background: rgba(20, 22, 36, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(25px);
            box-shadow: 0 8px 32px rgba(74, 110, 255, 0.2);
            width: 90%;
            max-width: 1000px;
            height: 85%;
            max-height: 800px;
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: all 0.3s ease;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(26, 29, 47, 0.95);
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .model-options {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .option-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .divider {
            width: 1px;
            height: 24px;
            background: rgba(255, 255, 255, 0.1);
            margin: 0 10px;
        }

        #response-area {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
        }

        #response-area::-webkit-scrollbar {
            width: 6px;
        }

        #response-area::-webkit-scrollbar-track {
            background: transparent;
        }

        #response-area::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }

        .message {
            margin: 16px 0;
            padding: 18px;
            border-radius: 20px;
            max-width: 75%;
            position: relative;
            line-height: 1.5;
            font-size: 15px;
            transition: all 0.3s ease;
            animation: messageIn 0.3s ease-out;
        }

        @keyframes messageIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background: linear-gradient(135deg, #4a6eff 0%, #7747ff 100%);
            border: none;
            box-shadow: 0 4px 15px rgba(74, 110, 255, 0.2);
            align-self: flex-end;
            color: #ffffff;
            margin-left: auto;
        }

        .ai-message {
            background: rgba(38, 41, 61, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            align-self: flex-start;
            margin-right: auto;
        }

        #input-container {
            padding: 20px;
            background: rgba(26, 29, 47, 0.95);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            gap: 12px;
            align-items: center;
        }

        #user-input {
            flex: 1;
            background: rgba(38, 41, 61, 0.9);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            font-family: inherit;
            padding: 16px 20px;
            border-radius: 18px;
            outline: none;
            font-size: 15px;
            transition: all 0.3s ease;
        }

        #user-input:focus {
            border-color: rgba(74, 110, 255, 0.5);
            box-shadow: 0 0 20px rgba(74, 110, 255, 0.15);
        }

        button {
            background: linear-gradient(135deg, #4a6eff 0%, #7747ff 100%);
            border: none;
            padding: 14px 28px;
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 18px;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(74, 110, 255, 0.3);
        }

        button:active {
            transform: translateY(0);
        }

        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Markdown内容样式优化 */
        .markdown-content {
            line-height: 1.6;
        }

        .markdown-content strong {
            color: #fff;
            font-weight: 600;
        }

        .markdown-content h1, .markdown-content h2 {
            margin: 1em 0 0.5em;
            color: #fff;
            font-weight: 600;
            line-height: 1.3;
        }

        .markdown-content h1 {
            font-size: 1.5em;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 0.3em;
        }

        .markdown-content h2 {
            font-size: 1.3em;
        }

        .markdown-content p {
            margin: 0.8em 0;
        }

        .markdown-content ul, .markdown-content ol {
            margin: 0.5em 0;
            padding-left: 1.5em;
        }

        .markdown-content li {
            margin: 0.3em 0;
        }

        .markdown-content code {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-family: 'Fira Code', monospace;
            font-size: 0.9em;
        }

        .markdown-content pre {
            background: rgba(255, 255, 255, 0.1);
            padding: 1em;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1em 0;
        }

        .markdown-content pre code {
            background: none;
            padding: 0;
            font-size: 0.9em;
            color: #e0e0e0;
        }

        .markdown-content blockquote {
            margin: 1em 0;
            padding: 0.5em 1em;
            border-left: 3px solid rgba(74, 110, 255, 0.5);
            background: rgba(74, 110, 255, 0.1);
            border-radius: 0 4px 4px 0;
        }

        .markdown-content a {
            color: #4a6eff;
            text-decoration: none;
            border-bottom: 1px solid rgba(74, 110, 255, 0.3);
            transition: all 0.2s ease;
        }

        .markdown-content a:hover {
            color: #7747ff;
            border-bottom-color: #7747ff;
        }

        .markdown-content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 1em 0;
        }

        /* 分隔线样式 */
        .separator {
            margin: 1em 0;
            height: 1px;
            background: linear-gradient(to right, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent
            );
        }

        /* 光标动画 */
        .cursor {
            display: inline-block;
            width: 2px;
            height: 1.2em;
            background: #4a6eff;
            margin-left: 2px;
            vertical-align: middle;
            animation: cursorBlink 1s infinite;
        }

        @keyframes cursorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* 徽章样式优化 */
        .model-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 500;
            background: rgba(74, 110, 255, 0.15);
            color: #4a6eff;
            border: 1px solid rgba(74, 110, 255, 0.3);
            transition: all 0.3s ease;
        }

        .model-badge.active {
            background: linear-gradient(135deg, #4a6eff 0%, #7747ff 100%);
            color: #fff;
            border: none;
        }

        .badge {
            padding: 3px 8px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            background: rgba(255, 71, 71, 0.15);
            color: #ff4747;
            border: 1px solid rgba(255, 71, 71, 0.3);
        }

        .control-buttons {
            display: flex;
            gap: 8px;
        }

        .reject-button {
            background: rgba(255, 71, 71, 0.15);
            border: 1px solid rgba(255, 71, 71, 0.3);
            color: #ff4747;
        }

        .end-button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }
        
        /* 聊天容器 */
        #chat-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 90% 10%, rgba(74, 110, 255, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 10% 90%, rgba(119, 71, 255, 0.15) 0%, transparent 60%),
                linear-gradient(to right, rgba(46, 213, 255, 0.1) 0%, transparent 100%);
            z-index: -1;
        }

        @keyframes glowPulse {
            0% { opacity: 0.6; }
            50% { opacity: 0.9; }
            100% { opacity: 0.6; }
        }
        
        /* 动态背景 */
        #chat-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 80% 20%, rgba(46, 213, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(135, 77, 255, 0.1) 0%, transparent 50%);
            z-index: -1;
        }
        
        /* 移除不必要的动画 */
        #chat-container {
            transform: perspective(1000px);
        }
        
        /* 确保消息容器滚动到最新消息 */
        #message-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) rgba(16, 18, 33, 0.95);
        }
        
        #message-container::-webkit-scrollbar {
            width: 8px;
        }
        
        #message-container::-webkit-scrollbar-track {
            background: transparent;
        }
        
        #message-container::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
            /* 聊天容器 */
        #chat-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 90% 10%, rgba(74, 110, 255, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 10% 90%, rgba(119, 71, 255, 0.15) 0%, transparent 60%),
                linear-gradient(to right, rgba(46, 213, 255, 0.1) 0%, transparent 100%);
            z-index: -1;
            opacity: 0.8;
            animation: glowPulse 8s ease-in-out infinite;
        }

        @keyframes glowPulse {
            0% { opacity: 0.6; }
            50% { opacity: 0.9; }
            100% { opacity: 0.6; }
        }
        
        /* 动态背景 */
        #chat-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 80% 20%, rgba(46, 213, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(135, 77, 255, 0.1) 0%, transparent 50%);
            z-index: -1;
        }
        
        /* 移除不必要的动画 */
        #chat-container {
            transform: perspective(1000px);
        }
        
        /* 确保消息容器滚动到最新消息 */
        #message-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.2) rgba(16, 18, 33, 0.95);
        }
        
        #message-container::-webkit-scrollbar {
            width: 8px;
        }
        
        #message-container::-webkit-scrollbar-track {
            background: rgba(16, 18, 33, 0.95);
        }
        
        #message-container::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }

        /* 移动设备适配 */
        @media screen and (max-width: 768px) {
            #chat-container {
                width: 100%;
                height: 100%;
                max-height: none;
                border-radius: 0;
            }

            .header {
                padding: 12px;
            }

            .model-options {
                flex-wrap: wrap;
                gap: 8px;
            }

            .option-group {
                font-size: 13px;
            }

            .model-badge {
                padding: 4px 8px;
                font-size: 12px;
            }

            .badge {
                padding: 2px 6px;
                font-size: 11px;
            }

            #input-container {
                padding: 12px;
            }

            #user-input {
                padding: 12px 16px;
                font-size: 14px;
            }

            button {
                padding: 10px 20px;
                font-size: 14px;
            }

            .message {
                max-width: 90%;
                padding: 12px;
                font-size: 14px;
            }

            .control-buttons {
                gap: 6px;
            }

            /* 在移动设备上隐藏某些装饰性元素 */
            .floating-message {
                display: none;
            }

            /* 调整滚动条样式 */
            #response-area::-webkit-scrollbar {
                width: 4px;
            }

            /* 调整Markdown内容在移动设备上的显示 */
            .markdown-content h1 {
                font-size: 1.5em;
            }
            .markdown-content h2 {
                font-size: 1.3em;
            }
            .markdown-content pre {
                padding: 0.8em;
                font-size: 13px;
            }
            .markdown-content code {
                font-size: 13px;
            }
        }

        /* 适配超小屏幕设备 */
        @media screen and (max-width: 480px) {
            .header {
                padding: 8px;
            }

            .model-options {
                justify-content: center;
            }

            .divider {
                display: none;
            }

            .option-group {
                flex-basis: 100%;
                justify-content: center;
            }

            #input-container {
                flex-direction: column;
                gap: 8px;
                padding: 8px;
            }

            .control-buttons {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 4px;
            }

            button {
                width: 100%;
                padding: 8px;
                font-size: 13px;
            }

            .message {
                max-width: 95%;
                margin: 8px 0;
            }
        }

        /* 适配横屏模式 */
        @media screen and (max-height: 600px) and (orientation: landscape) {
            #chat-container {
                height: 100vh;
                max-height: none;
            }

            .header {
                padding: 8px;
            }

            #input-container {
                padding: 8px;
            }

            .message {
                margin: 8px 0;
            }
        }

        /* 适配深色模式 */
        @media (prefers-color-scheme: dark) {
            .markdown-content code {
                background: rgba(255, 255, 255, 0.1);
            }
            
            .markdown-content pre {
                background: rgba(255, 255, 255, 0.1);
            }
        }
    </style>
        
        
    <script>
        // 简单的音效生成器
        class SoundEffects {
            constructor() {
                this.context = null;
                this.enabled = true;
            }

            init() {
                if (!this.context) {
                    this.context = new (window.AudioContext || window.webkitAudioContext)();
                }
                if (this.context.state === 'suspended') {
                    this.context.resume();
                }
            }

            playTone(frequency = 600, duration = 0.015) {
                if (!this.enabled) return;
                
                try {
                    this.init();
                    
                    const oscillator = this.context.createOscillator();
                    const gain = this.context.createGain();
                    
                    oscillator.connect(gain);
                    gain.connect(this.context.destination);
                    
                    oscillator.type = 'sine';
                    oscillator.frequency.setValueAtTime(frequency, this.context.currentTime);
                    
                    gain.gain.setValueAtTime(0.1, this.context.currentTime);
                    gain.gain.exponentialRampToValueAtTime(0.001, this.context.currentTime + duration);
                    
                    oscillator.start(this.context.currentTime);
                    oscillator.stop(this.context.currentTime + duration);
                } catch (e) {
                    console.error('音效播放失败:', e);
                }
            }

            playClick() {
                this.playTone(600, 0.015);
            }

            playReturn() {
                this.playTone(800, 0.020);
            }
        }

        // 创建全局音效实例
        const soundEffects = new SoundEffects();
    </script>
</head>
<body>
    <div id="chat-background"></div>
    <div id="chat-container">
        <div class="header">
            <div class="model-options">
                <div class="option-group">
                    <label>
                        <input type="checkbox" id="use-r1" onchange="updateModelBadge()">
                        使用 R1 模型
                    </label>
                    <span id="model-badge" class="model-badge">当前：V3</span>
                    <span class="badge">实验性</span>
                </div>
                <div class="divider"></div>
                <div class="option-group">
                    <label>
                        <input type="checkbox" id="use-web" onchange="updateWebSearchBadge()">
                        联网搜索
                    </label>
                    <span id="web-badge" class="model-badge">已关闭</span>
                </div>
            </div>
        </div>
        <div id="response-area"></div>
        <div id="input-container">
            <input type="text" id="user-input" placeholder="输入你的问题...按回车发送" autocomplete="off">
            <div class="control-buttons">
                <button onclick="getResponse()" id="send-button">发送</button>
                <button onclick="rejectResponse()" id="reject-button" class="reject-button" style="display: none;">拒绝</button>
                <button onclick="endConversation()" id="end-button" class="end-button">结束对话</button>
            </div>
        </div>
    </div>

    <script>
        let currentAIMessage = null;
        let currentReasoningContent = null;
        let currentAnswerContent = null;
        let cursor = null;
        let isTyping = false;

        // 添加音效开关按钮
        const soundToggle = document.createElement('div');
        soundToggle.className = 'option-group';
        soundToggle.innerHTML = `
            <label>
                <input type="checkbox" id="sound-toggle" checked onchange="toggleSound()">
                打字音效
            </label>
            <span id="sound-badge" class="model-badge active">已开启</span>
        `;
        document.querySelector('.model-options').appendChild(document.createElement('div')).className = 'divider';
        document.querySelector('.model-options').appendChild(soundToggle);

        function toggleSound() {
            soundEffects.enabled = document.getElementById('sound-toggle').checked;
            const badge = document.getElementById('sound-badge');
            badge.textContent = soundEffects.enabled ? '已开启' : '已关闭';
            badge.className = 'model-badge' + (soundEffects.enabled ? ' active' : '');
            
            if (soundEffects.enabled) {
                soundEffects.init();
            }
        }

        // 修改消息显示逻辑，添加打字效果
        async function typeText(element, text, delay = 30) {
            if (!text) return;
            
            isTyping = true;
            let index = 0;
            
            while (index < text.length && isTyping) {
                const char = text[index];
                
                if (soundEffects.enabled) {
                    if (char === '\n' || char === '.' || char === '。' || char === '!' || char === '！' || 
                        char === '?' || char === '？' || char === ',' || char === '，') {
                        soundEffects.playReturn();
                    } else if (index % 2 === 0) {
                        soundEffects.playClick();
                    }
                }
                
                element.insertAdjacentText('beforeend', char);
                element.appendChild(cursor);
                element.parentElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
                
                await new Promise(resolve => setTimeout(resolve, delay));
                index++;
            }
            
            isTyping = false;
        }

        // 修改消息处理逻辑
        async function processStreamMessage(parsed, useR1) {
            if (cursor && cursor.parentNode) {
                cursor.remove();
            }

            // 安全的Markdown解析函数
            function safeMarkdownParse(text) {
                try {
                    // 移除重复的歌词行
                    if (text.includes('```')) {
                        const lines = text.split('\n');
                        const uniqueLines = [...new Set(lines)];
                        text = uniqueLines.join('\n');
                    }
                    return marked.parse(text);
                } catch (error) {
                    console.error('Markdown解析错误:', error);
                    return text.replace(/\n/g, '<br>');
                }
            }

            if (useR1) {
                if (parsed.type === 'reasoning') {
                    // 创建临时容器来累积思维过程内容
                    if (!currentReasoningContent.dataset.fullContent) {
                        currentReasoningContent.dataset.fullContent = '';
                    }
                    currentReasoningContent.dataset.fullContent += parsed.content;
                    const reasoningHtml = safeMarkdownParse(currentReasoningContent.dataset.fullContent);
                    currentReasoningContent.innerHTML = '<strong>思维过程:</strong>\n' + reasoningHtml;
                    currentReasoningContent.appendChild(cursor);
                } else if (parsed.type === 'separator') {
                    const separator = document.createElement('div');
                    separator.className = 'separator';
                    currentAIMessage.appendChild(separator);
                    currentAnswerContent.className = 'answer markdown-content';
                    currentAIMessage.appendChild(currentAnswerContent);
                    currentAnswerContent.appendChild(cursor);
                } else if (parsed.type === 'answer') {
                    // 创建临时容器来累积答案内容
                    if (!currentAnswerContent.dataset.fullContent) {
                        currentAnswerContent.dataset.fullContent = '';
                    }
                    currentAnswerContent.dataset.fullContent += parsed.content;
                    const answerHtml = safeMarkdownParse(currentAnswerContent.dataset.fullContent);
                    currentAnswerContent.innerHTML = '<strong>最终答案:</strong>\n' + answerHtml;
                    currentAnswerContent.appendChild(cursor);
                }
            } else {
                if (parsed.choices && parsed.choices[0]?.delta?.content) {
                    const content = parsed.choices[0].delta.content;
                    // 创建临时容器来累积内容
                    if (!currentAnswerContent.dataset.fullContent) {
                        currentAnswerContent.dataset.fullContent = '';
                    }
                    currentAnswerContent.dataset.fullContent += content;
                    // 转换为Markdown
                    const html = safeMarkdownParse(currentAnswerContent.dataset.fullContent);
                    currentAnswerContent.innerHTML = '<strong>回答:</strong>\n' + html;
                    currentAnswerContent.appendChild(cursor);
                }
            }
            
            // 滚动到最新消息
            currentAIMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
        }

        function updateModelBadge() {
            const useR1 = document.getElementById('use-r1').checked;
            const badge = document.getElementById('model-badge');
            badge.textContent = useR1 ? '当前：R1' : '当前：V3';
            badge.className = 'model-badge' + (useR1 ? ' active' : '');
        }

        function updateWebSearchBadge() {
            const useWeb = document.getElementById('use-web').checked;
            const badge = document.getElementById('web-badge');
            badge.textContent = useWeb ? '已开启' : '已关闭';
            badge.className = 'model-badge' + (useWeb ? ' active' : '');
        }

        // 添加浮动消息处理函数
        function addFloatingMessage(text, isUser) {
            const message = document.createElement('div');
            message.className = 'floating-message';
            message.textContent = text;
            message.style.left = Math.random() * 100 + '%';
            message.style.opacity = '0.1';
            message.style.filter = 'blur(2px)';
            
            const chatBackground = document.getElementById('chat-background');
            chatBackground.appendChild(message);

            // 移除旧消息以避免DOM过载
            setTimeout(() => {
                message.remove();
            }, 20000);
        }

        async function getResponse() {
            const userInput = document.getElementById('user-input');
            const responseArea = document.getElementById('response-area');
            const sendButton = document.getElementById('send-button');
            const useR1 = document.getElementById('use-r1').checked;
            const useWeb = document.getElementById('use-web').checked;
            
            if (!userInput.value.trim()) {
                return;
            }

            // 禁用输入和按钮
            userInput.disabled = true;
            sendButton.disabled = true;
            sendButton.textContent = '发送中...';

            // 显示用户输入
            responseArea.innerHTML += `<div class="message user-message"><strong>我:</strong> ${userInput.value}</div>`;
            
            // 添加浮动消息到背景
            addFloatingMessage(userInput.value, true);
            
            // 创建新的 AI 消息容器
            currentAIMessage = document.createElement('div');
            currentAIMessage.className = 'message ai-message markdown-content';
            
            if (useR1) {
                // 创建思维链容器
                currentReasoningContent = document.createElement('div');
                currentReasoningContent.className = 'reasoning markdown-content';
                currentReasoningContent.innerHTML = '<strong>思维过程:</strong>\n';
                currentAIMessage.appendChild(currentReasoningContent);
            }
            
            // 创建答案容器
            currentAnswerContent = document.createElement('div');
            currentAnswerContent.className = 'answer markdown-content';
            currentAnswerContent.innerHTML = '<strong>回答:</strong>\n';
            
            // 添加光标
            cursor = document.createElement('span');
            cursor.className = 'cursor';

            // 将答案容器添加到AI消息容器中
            if (!useR1) {
                currentAIMessage.appendChild(currentAnswerContent);
            }
            
            // 将AI消息容器添加到响应区域
            responseArea.appendChild(currentAIMessage);
            
            try {
                const response = await fetch('/api/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        message: userInput.value,
                        useR1: useR1,
                        useWeb: useWeb
                    })
                });

                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                while (true) {
                    const {value, done} = await reader.read();
                    if (done) break;
                    
                    const text = decoder.decode(value);
                    const lines = text.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            const data = line.slice(6);
                            if (data === '[DONE]') continue;
                            
                            try {
                                const parsed = JSON.parse(data);
                                await processStreamMessage(parsed, useR1);
                            } catch (e) {
                                if (data !== '[DONE]') {
                                    console.error('解析错误:', e);
                                }
                            }
                        }
                    }
                }

                // 清除输入框
                userInput.value = '';
            } catch (error) {
                if (cursor && cursor.parentNode) {
                    cursor.remove();
                }
                currentAIMessage.innerHTML += `<p style="color:red">错误: ${error.message}</p>`;
            } finally {
                isTyping = false;
                // 恢复输入和按钮
                userInput.disabled = false;
                sendButton.disabled = false;
                sendButton.textContent = '发送';
                userInput.focus();
                
                // 滚动到底部
                responseArea.scrollTop = responseArea.scrollHeight;
            }
        }

        // 添加回车键发送功能
        document.getElementById('user-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                getResponse();
            }
        });

        // 初始化所有标记
        updateModelBadge();
        updateWebSearchBadge();

        // 初始化音效系统
        document.addEventListener('click', function initAudio() {
            soundEffects.init();
            document.removeEventListener('click', initAudio);
        });
    </script>
</body>
</html>